<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
</head>

<body>
    <div id="app">
        <form @submit.prevent="handleSubmit">
            <p>姓名：</p>
            <input placeholder="编辑我……" v-model="formData.name" required>

            <p>专业：</p>
            <select v-model="formData.major" required>
                <option value="1">JAVA</option>
                <option value="2">WEB</option>
                <option value="3">UI</option>
            </select>

            <p>性别：</p>
            男：<input type="radio" value="1" name="sex" v-model="formData.sex">
            女：<input type="radio" value="2" name="sex" v-model="formData.sex">

            <p>电话：</p>
            <input placeholder="编辑我……" v-model="formData.tel" required pattern="1\d{10}">
            <div>
                <button>提交</button>
            </div>
    </form>
    </div>
</body>
<script src="../../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            formData: {
                sex: "1",
            },
            arr: [],
        },
        methods: {
            handleSubmit() {
                // 扩展运算符，浅拷贝
                let data = {...this.formData};
                this.arr.push(data);
                this.formData = {
                    sex: "1"
                }
            }
        }
    })
</script>

</html>